<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    @close="dialogCLose()"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >
      <el-form-item
        label="商品名称"
        prop="type"
        :class="{ 'is-required': !dataForm.id }"
      >
        <el-select
          v-model="dataForm.type"
          placeholder="类型请选择"
          @change="change($event)"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="序列号"
        prop="serialNumber"
        :class="{ 'is-required': !dataForm.id }"
      >
        <el-input
          v-model.number="dataForm.serialNumber"
          onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
          type="number"
          placeholder="序列号"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="备注"
        prop="remark"
      >
        <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { isEmail, isMobile } from "@/utils/validate";
export default {
  data() {
    return {
      parentValue: [],
      value1: "",
      value2: "",
      value: "",
      visible: false,
      roleList: [],
      options: [],
      dataForm: {
        id: 0,
        materialName: "",
        serialNumber: "",
        remark: "",
        materialId: "",
      },
      dataRule: {
        serialNumber: [
          { required: true, message: "序列号不能为空", trigger: "change" },
          { type: "number", message: "条码必须为数字" },
        ],
        type: [
          { required: true, message: "商品名称不能为空", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    change(item) {
      // this.dataForm.id = item.id;
      this.dataForm.materialId = item.id;
      this.dataForm.type = item.label;
      this.$set(this.dataForm,this.dataForm.type, item.label)
      console.log(item);
    },
    init(id, materialName, serialNumber, remark, materialId) {
      // console.log(id,materialName,serialNumber,remark);
      console.log(typeof serialNumber);
      // 获取商品名称
      let str = `{"name":"","model":""}`;
      var search = encodeURIComponent(str);
      this.$http({
        url: this.$http.adornUrl(
          `/material/getMaterialEnableSerialNumberList?search=${search}`
        ),
        method: "get",
        params: this.$http.adornParams({
          currentPage: 1,
          pageSize: 1000,
        }),
      }).then((data) => {
        // console.log(data.data.data.page.rows)
        if (data.data && data.data.code === 0) {
          this.options = data.data.data.page.rows.filter((fitem) => {
            // console.log(fitem)
            fitem.value = fitem.id;
            fitem.label = fitem.name;
            return fitem;
          });
        }
      });
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.dataForm.type = materialName;
          // this.dataForm.materialName = materialName;
          this.dataForm.serialNumber = Number(serialNumber);
          this.dataForm.remark = remark;
          this.dataForm.materialId = materialId;
        }
      });
    },

    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          let info = {
            materialName: this.dataForm.type,
            materialId: this.dataForm.materialId,
            serialNumberId: this.dataForm.id,
            serialNumber: this.dataForm.serialNumber,
            remark: this.dataForm.remark,
            id: this.dataForm.id,
          };
          // console.log(info)
          // console.log(this.dataForm.type.label)
          // return
          let url = this.$http.adornUrl("/serialNumber/addSerialNumber");
          console.log(this.dataForm.id);
          if (this.dataForm.id) {
            console.log("修改");
            url = this.$http.adornUrl(`/serialNumber/updateSerialNumber`);
          }
          // return
          this.$http({
            url,
            method: "post",
            data: this.$http.adornData(info, false),
          }).then(({ data }) => {
            console.log(data);
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },

    dialogCLose() {
      this.dataForm.type=""
      this.$refs.dataForm.resetFields()
    },
  },
};
</script>
